<!DOCTYPE>
<html>

<head>
  <meta charset="utf-8">
  <title>IFE JavaScript Task 21</title>
  <script src="js/task21.js"></script>
  <style>
  textarea{
    width: 500px;
    height: 200px;
    resize:none;
  }
  .box {
    margin-top: 20px;
    overflow: hidden;
  }

  .box .items {
    float: left;
    width: 100px;
    max-height: 100px;
    margin-left:10px;
    margin-top:10px;
    /*font-size: 20px;*/
    font-weight: bold;
    border: 1px solid #565656;
    background-color: #ccc;
  }
  </style>
</head>

<body>
  <fieldset>
    <legend>说明</legend>
    <dl>
      <dt>任务目的</dt>
      <dd>实践JavaScript数组、字符串相关操作</dd>
    </dl>
    <dl>
      <dt>任务目的</dt>
      <dd>基于任务18进行升级</dd>
      <dd>将新元素输入框从input改为textarea</dd>
      <dd>允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔</dd>
      <dd>增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。举例，内容中有abcd，查询词为ab或bc，则该内容需要标识</dd>
    </dl>
  </fieldset>
  <div>
    <textarea id="in"></textarea>
    <button id="leftin">左侧入</button>
    <button id="rightin">右侧入</button>
    <button id="leftout">左侧出</button>
    <button id="rightout">右侧出</button>
  </div>
  <div>
    <input id="serch" type="text" />
    <button id="serch-btn">查询</button>
  </div>
  <div id="box" class="box">
  </div>
</body>

</html>
